import React from 'react';
import {Modal, Col, Form, Button, Row, Spin} from 'antd';
import Grid from '../../components/table/grid';
import {injectIntl} from 'react-intl';
import StubPicker from '../../components/pickCity/StubPicker';
import {withRouter} from "react-router-dom";
import axios from 'axios'
import {message} from "antd/lib/index";

const FormItem = Form.Item;
const createForm = Form.create;

@withRouter
class popTask extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            refresh: 0,
            params: {
                stubGroupId: '',
            },
            noFirstFech:true,
            loading:false,
            selectedRows: []
        };
        const common = this.props.intl.messages.common;
        this.columns = [
            {
                title: common.EquipmentNo,
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: common.powerStationName,
                dataIndex: 'name',
                key: 'name',
            },

        ];
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.visible&&this.state.params.stubGroupId!==''){
            this.setState({
                refresh: this.state.refresh + 1,
                params:Object.assign(this.state.params,{stubGroupId:nextProps.form.getFieldValue('stubGroupId').currency})
            });
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (errors) {
                console.log('Errors in form!!!');
                return;
            }
            values.stubGroupId = values.stubGroupId.currency;
            this.setState({
                noFirstFech:false,
                params: {...values},
                refresh: this.state.refresh + 1
            });
        });
    }

    addItem = () => {
        const common = this.props.intl.messages.common;
        if (this.props.location.state.status === "add") {
            this.props.saveSelectRows(this.state.selectedRows);
            this.props.onCancel();
        }
        //修改时调用借口
        if (this.props.location.state.status === "modify") {
            this.setState({
                loading:true,
            });
            let params = {
                planId: this.props.location.state.info.id,
                stubIds: this.state.selectedRows.map((item) => {
                    return item.id
                }).join(','),
                type: 1
            }
            axios.post(`/api/plan/stub/mod`, {...params}).then(res => {
                this.setState({
                    loading:false,
                });
                this.props.onCancel();
                this.props.freshTable();
                if(res&&res.data&&res.data.code==200){
                    message.success(common.OperateSuccessfully);

                }
            })
        }
    };
    checkPrice = (rule, value, callback) => {
        const common = this.props.intl.messages.common;
        if (value.currency) {
            callback();
            return;
        }
        callback(common.stubNoEmpty);
    }


    render() {
        const {visible, onCancel} = this.props;
        const common = this.props.intl.messages.common;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows
                })
            },
        };
        return (
            <Modal
                wrapClassName="sass-tableWrapper"
                visible={visible}
                title={common.addNewEquip}
                onCancel={onCancel}
                footer={[<div key={1} style={{height: 22}}></div>]}
            >
                <Spin tip="Loading..." spinning={this.state.loading}>
                    <div>
                        <form form={this.props.form}>
                            <Row gutter={16}>
                                <Col xl={8} xxl={6}>
                                    <FormItem
                                    >
                                        {this.props.form.getFieldDecorator(`stubGroupId`, {
                                            rules: [{validator: this.checkPrice}],
                                            initialValue: {currency: undefined}
                                        })(
                                            <StubPicker url="/api/plan/stubGroup/qry" mode={true}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem>
                                        <Button style={{marginRight: 8}} className="ant-btn-84"
                                                onClick={this.handleSubmit}>{common.search}</Button>
                                        <Button type="primary" className="ant-btn-84"
                                                onClick={this.addItem}>{`新增`}</Button>
                                    </FormItem>
                                </Col>
                            </Row>
                        </form>
                        <Grid rowSelection={rowSelection} refresh={this.state.refresh} params={this.state.params}
                              columns={this.columns} url="/api/plan/stub/notExist/qry" noFirstFech={this.state.noFirstFech}/>
                    </div>
                </Spin>
            </Modal>
        );
    }
}

//ant 表格验证需要创建表格-createForm
popTask = createForm()(popTask);
export default injectIntl(popTask)